// define var
// color
$colors: (
  'primary': #db9e3f,
  'diff': #805300,
  'black': #000,
  'back-1': #333,
  'gray': #999,
  'gray-1': #666,
  'gray-2': #d4d4d5,
  'attack': #791a16,
  'survival': #34342d,
  'info': #4b67af,
  'blue': #4394e4,
  'skill': #203693,
  'light': #f1f1f1,
  'light-1': #f9f9f9,
  'light-2': #e3e6e9,
  'white': #fff
);

$border-color: map-get($colors, 'light-2');

// font-size
$base-font-size: 1rem;
$font-sizes: (
  xxs: 0.6154,
  //8px
    xs: 0.7692,
  //10px
    sm: 0.9231,
  //12px
    md: 1,
  //13px
    lg: 1.0769,
  //14px
    xl: 1.2308,
  //16px
    xxl: 1.5385
);

$flex-jc: (
  'start': start,
  'end': flex-end,
  'center': center,
  'between': space-between,
  'around': space-around,
  'evenly': space-evenly
);

$flex-ai: (
  'start': start,
  'end': end,
  'center': center,
  'stretch': stretch
);

// spacing
$spacing-types: (
  'm': margin,
  'p': padding
);
$spacing-directions: (
  't': top,
  'r': right,
  'b': bottom,
  'l': left
);
$spacing-sizes: (
  0: 0,
  1: 0.25,
  2: 0.5,
  3: 1,
  4: 1.5,
  5: 3
);
$spacing-base: 1rem;
